<template>
  <div id="home">
    <home-nav-bar/>
    <TabControl class="tab-control" :titles="['新款','精选','潮流']" @itemClick="itemClick" ref="tabControl1" v-show="isTabFixed"/>
    <BScroll class="better-scroll"
             @scroll="scroll"
             ref="itemScroll"
             :probe-type="3"
             :pull-up-load="true"
             @pullingUp="learnMore"
    >
      <swiper-banner :banners="banners"/>
      <hot-buyimge :recommends="recommends"/>
      <recommend/>
      <TabControl class="tab-control" :titles="['新款','精选','潮流']" @itemClick="itemClick" ref="tabControl2"/>
      <good-list :goodslist="goods[currentType].list"/>
    </BScroll>
    <back-top @click="backtopClick" v-show="isShowBackTop"/>
  </div>
</template>

<script>
  //children
  import HomeNavBar from "./homeprops/HomeNavBar";
  import SwiperBanner from "./homeprops/SwiperBanner";
  import HotBuyimge from "./homeprops/HotBuyimge";
  import recommend from "./homeprops/recommend";
  //common context
  import TabControl from "../../components/content/tabcontrol/TabControl";
  import GoodList from "../../components/content/goodslist/GoodList";
  import BScroll from "../../components/common/scroll/BScroll";
  import BackTop from "../../components/content/backtop/BackTop";

  import {getHomeGoodsData, getHomeMultData} from "../../network/home";


  export default {
    name: "Home",
    components:{
      HomeNavBar,
      SwiperBanner,
      HotBuyimge,
      recommend,

      TabControl,
      GoodList,
      BScroll,
      BackTop,

    },
    data(){
      return{
        banners:[],
        recommends:[],
        goods:{
          'new':{page:0,list:[]},
          'sell':{page:0,list:[]},
          'pop':{page:0,list:[]},
        },
        currentType: 'pop',
        isShowBackTop:false,
        tabOffsetTop:0,
        isTabFixed:false,
        backToPosition:0,
      }
    },
    created() {
      //console.log('-----');
      //获取数据
      this.getHomeMultData();

      //获取商品列表数据
      this.getHomeGoodsData('pop')
      this.getHomeGoodsData('new')
      this.getHomeGoodsData('sell')

    },
    mounted() {
      //获取tabControl距离顶部的距离
      setTimeout(()=>{
        this.tabOffsetTop=this.$refs.tabControl2.$el.offsetTop
      },100)
    },
    activated() {
        this.$ref.itemScroll.scroll.scrollto(0,this.backToPosition,0)

    },
    deactivated() {
      this.backToPosition=this.$refs.itemScroll.scroll.getscrollY()
    },
    methods:{
      //组件传递事件
      scroll(position){
        this.isShowBackTop = (-position.y) > 1500;

        this.isTabFixed = (-position.y) >this.tabOffsetTop;
      },

      //点击事件方法
      itemClick(index){
        if (index==0){
          this.currentType='pop'
        }
        else if (index==1)
        {
          this.currentType='new'
        }
        else {
          this.currentType='sell'
        }
        this.getHomeGoodsData(this.currentType)
        this.$refs.tabControl1.IndexPointer = index;
        this.$refs.tabControl2.IndexPointer = index;
      },
      //返回顶部
      backtopClick(){
        this.$refs.itemScroll.scrollto(0,0)
      },
      //获取更多商品数据
      learnMore(){
        this.getHomeGoodsData(this.currentType)


      },


      //请求数据方法
      getHomeMultData(){
        getHomeMultData().then(
            res=>{
              this.banners=res.data.data.banner.list;
              this.recommends=res.data.data.recommend.list;
            }
        )
      },
      getHomeGoodsData(type){
        const page=this.goods[type].page+1;
        getHomeGoodsData(type,page).then(
            res=>{
              this.goods[type].list.push(...res.data.data.list);
              this.goods[type].page+=1;
              this.$refs.itemScroll.finishPullUp();
            }

        )
      }
    }

  }
</script>

<style scoped>
 #home{
   position: relative;
   height: 100vh;
 }
  .better-scroll{
    position: absolute;
    top: 44px;
    left: 0;
    right: 0;
    bottom: 49px;
    overflow: hidden;
  }
  .tab-control{
    position: relative;
    z-index: 2;

  }

</style>